<template>
    <view v-if="!loading">
        <uv-navbar title="" autoBack bg-color="rgba(255,255,255,0)" titleStyle="font-size:0">

        </uv-navbar>
        <view class=" " style="height:525rpx;">
            <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
                style="text-align:center;height:525rpx;" :autoplay="autoplay" :interval="interval" :duration="duration">
                <!-- v-for="(i,n) in imgList" :key="n" -->
                <swiper-item>
                    <image :src="detailData.logo_image" mode=""></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="goods">
            <view class="goodsName align-center">
                {{detailData.name}} <text class="tag" v-if="detailData.time_all">{{detailData.time_all}}营业</text>
            </view>
            <view class="tagList align-center justify-start">
                <text class="" v-for="(i,n) in detailData.label_arr" :key="n">{{i}}</text>
            </view>
            <view class="address justify-between align-start">
                <text>地址：</text>
                <view class="clamp2 flex1">
                    {{detailData.address}} 

                </view>
                <image class="mr15 " style="margin-left: 30rpx;" @click="$utils.dh(detailData.name, detailData.pointlat,detailData.pointlng)" src="/static/images/middle/i7.png" mode="widthFix">
                </image>
                <image src="/static/images/middle/i6.png" @click="$utils.call(detailData.mobile)" mode="widthFix"></image>
            </view>
        </view>
        <view class="content bg100 plr15 pb50">
            <view class="grid justify-between mb20">
                <view class="gridItem flex-col" @click="toUrl('/pages/meetingTable/index')">
                    <text>预约台桌</text>
                    <image src="/static/images/middle/i3.png" mode="widthFix"></image>

                </view>
                <view class="gridItem flex-col"  @click="toUrl('/pages/assistant/index')">
                    <text>美女助教</text>
                    <image src="/static/images/middle/i4.png" mode="widthFix"></image>

                </view>
                <view @click="toStoreGoods" class="gridItem flex-col">
                    <text>商品购买</text>
                    <image src="/static/images/middle/i5.png" mode="widthFix"></image>

                </view>


            </view>
            <!-- <uv-notice-bar direction="column" bgColor="#fff" :text="text"></uv-notice-bar> -->

            <view class="moduleTitle justify-between  ">本店助教推荐 </view>

            <view class=" justify-between flex-wrap ">
                <view class="peopleInfo" v-for="(item,index) in gyList " :key="index" @click="toMain(item)">
                    <image style="width: 340rpx;height: 370rpx;border-radius: 15rpx ;" :src="item.image" mode="">
                    </image>
                    <view class=" peopleTag ">
                        <view class="taginfo">
                            <image src="/static/images/index/i2.png" mode="widthFix"
                                style="width: 20rpx;margin-right: 4rpx;"></image>
                            {{item.type_name}}
                        </view>
                        <view class="tagStatus">
                            <text class="point"></text>
                            {{item.status==1?"工作中":"空闲"}}
                        </view>
                    </view>
                    <view class="peoplename justify-between">
                        {{item.name}}
                        <view class="align-center">{{item.eval}} <uv-icon size="14" color="#fff"
                                name="star-fill"></uv-icon> </view>
                    </view>

                </view>

                <view class="" v-if="gyList.length==0">
                    <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                </view>
            </view>
            <uv-tabs :list="list" :activeStyle="{
			color: '#333',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
		}" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" @click="click"></uv-tabs>

            <view class="justify-between flex-wrap ">
                <view class="goodsItem " v-for="(item,index) in storeGoods " :key="index" @click="toStoreGoods(item)">
                    <image :src="item.image" mode=""></image>
                    <view class="name">
                        {{item.title}}
                    </view>
                    <view class="price">
                        ￥{{item.price}}
                    </view>
                </view>
                <view class="" v-if="storeGoods.length==0">
                    <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                </view>
            </view>
        </view>
        <uv-picker ref="picker" :columns="car_brand" @change="cartypeChange" keyName="name"
            @confirm="confirm"></uv-picker>
        <uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
            @confirm="areaConfirm"></uv-picker>
            <customtab :value="1" ></customtab>
    </view>
    
</template>

<script>
    import customtab from '@/components/customTab.vue'
    export default {
        components: {
            customtab
        },
        data() {
            return {
                list: [

                ],
                imgList: [],
                headerList: [],
                car_brand: [
                    [],
                    []
                ],
                areaRrand: [
                    [],
                    []
                ],
                areatype: 0,
                text: [],
                orderList: [],
                indicatorDots: false,
                autoplay: true,
                interval: 3000,
                duration: 500,

                AreaData: [],
                carColumnData: [],
                columnData: [],
                car_type: "",
                total_cart: 0,
                cateList: [],

                gyList: [],
                yhList: [],
                orderList: [],
                lineBg: require('@/static/images/index/i1.png'),
                id: "",
                detailData: {},
                cate_id: "",
                page: 1,
                storeGoods: [],
                table_id: "",
                loading:false
            }
        },
        onLoad(opt) {
            // this.getIndex()
            // this.getOrder()
            // this.getAreaList()
            // this.getCate()
            
                
            if (opt.id){
                this.table_id = opt.id
                uni.setStorageSync('tableId', opt.id)
            }else{
                this.table_id= ''
                uni.setStorageSync('tableId','')
            }
            if (opt.shop_id) this.id = opt.shop_id
            this.getDetail()
            this.getCategory()
            this.getShopAssistant()
        },
        onShareAppMessage: function() {
            let that = this;
            wx.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
            return {
                title: '门店详情',
                imageUrl: '',
                path: '/pages/store/index?shop_id=' + this.id+'&id='+this.table_id
            };
        },
        onShareTimeline: function() {
            let that = this;
            return {
                title: '门店详情',
                imageUrl: '',


            };
        },
        methods: {
            async getShopAssistant() {
                let data = await this.$api.getShopAssistant({
                    shop_id: this.id
                })
                this.gyList = data.list
                console.log(data)
            },
            async getCategory() {
                let data = await this.$api.getShopCategory({
                    shop_id: this.id
                })
                console.log(data)
                this.list = data.list
                this.cate_id = data.list[0].id
                this.getStoreGoods()
            },

            async getStoreGoods() {
                let data = await this.$api.getShopGoods({
                    shop_id: this.id,
                    cate_id: this.cate_id,
                    page: this.page
                })
                console.log(data)
                this.storeGoods = data.list

            },
            async getDetail() {
                this.loading=true
                let data = await this.$api.getShopDetail({
                    id: this.id
                })
                console.log(data)
                this.detailData = data.detail
                this.loading=false
            },
            click(e) {
                console.log(e)
                this.cate_id = e.id
                this.storeGoods = []
                this.page = 1
                this.getStoreGoods()
            },
         



           
            toMain(item) {
                if(!uni.getStorageSync('logintoken')) return this.tologin()
                uni.navigateTo({
                    url: '/pages/userMain/index?id=' + item.id+'&table_id='+this.table_id
                })
            },
            toStoreGoods() {
                if(!uni.getStorageSync('logintoken')) return this.tologin()
                uni.navigateTo({
                    url: '/pages/goodsBuy/index?id=' + this.id+'&table_id='+this.table_id
                })
            },
            change(data) {
                if(!uni.getStorageSync('logintoken')) return this.tologin()
                uni.navigateTo({
                    url: '/pages/addressMain/index?id=' + data
                })
            },
            tologin(){
              uni.navigateTo({
                  url:'/pages/login/login'
              })  
            },
            toUrl(url) {
                if(!uni.getStorageSync('logintoken')) return this.tologin()
                uni.navigateTo({
                    url: url + '?id=' + this.id
                })
            },
            toGoods(item) {

            }
        },


    }
</script>
<style scoped lang="scss">
    .content {
        min-height: 100vh;
        position: relative;
        z-index: 99;
    }

    .header {}

    .formBox {
        position: relative;
        margin: 30rpx 0;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;

    }

    .formBox::before {
        position: absolute;
    }

    .bggray6 {
        border-radius: 5rpx;
        align-items: center;
        flex: 1;
        padding: 14rpx 17rpx 20rpx;
        // background-color: #F4F6F8;
        border-bottom: 1rpx solid #E4E4E4;
        font-size: 30rpx;
        color: #555;

        .send {
            width: 32rpx;
            height: 32rpx;
            padding: 4rpx;
            color: #fff;
            text-align: center;
            line-height: 32rpx;
            background: #277CC0;
            border-radius: 50%;
            font-size: 20rpx;
            margin-right: 11rpx;
        }

        view {
            flex: 1;
        }

        margin-bottom: 14rpx;
    }

    .right {
        margin-left: 17rpx;
    }

    .cartype {
        image {
            width: 34rpx;
            margin-right: 11rpx;
        }

        view {
            flex: 1;
        }

        input {
            flex: 1;
            font-size: 28rpx;
        }
    }

    .submit {
        background: #F24611;
        border-radius: 5rpx;
        color: #fff;

        text-align: center;
        font-size: 25rpx;
        line-height: 60rpx;
        height: 60rpx;
        margin-bottom: 16rpx;
    }

    .chat {
        background-color: #277CC0;
        border-radius: 5rpx;
        line-height: 60rpx;
        height: 60rpx;
        color: #fff;
        display: flex;
        font-size: 25rpx;

        justify-content: center;
        align-items: center;

        image {
            width: 36rpx;
            margin-right: 12rpx;
        }
    }

    .moduleTitle {

        font-weight: 500;
        font-size: 36rpx;
        color: #3D3D3D;
        margin: 30rpx auto;
        margin-left: 20rpx;
        text-align: center;
        font-weight: bold;
        position: relative;

        text {


            position: relative;
            z-index: 99;
        }
    }

    .moduleTitle::before {
        position: absolute;
        left: -10rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        clear: both;
        content: '';
        z-index: 9;
        width: 8rpx;
        height: 29rpx;
        background: #01C588;
        border-radius: 4rpx;



    }


    .orderItem {
        font-size: 24rpx;
        color: #666;

        image {
            width: 205rpx;
            height: 205rpx;
            border-radius: 15rpx;
            margin-right: 20rpx;

        }

        .orderright {
            width: 376rpx;

            .orderName {
                font-weight: bold;
                font-size: 26rpx;
                color: #1C1C1C;
            }

            .price {
                color: #2CC6A1;
                font-size: 26rpx;
            }
        }

        .apply {
            width: 132rpx;
            height: 54rpx;
            background: #2CC6A1;
            border-radius: 60rpx;
            line-height: 54rpx;
            text-align: center;
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }

    .noticeSwiper {

        height: 63rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
        border-radius: 12rpx;
        padding: 0 24rpx;
        color: #555555;

        text {
            margin: 0 8rpx;
        }
    }

    .noticeSwiper .swiper-item {
        height: 100%;
    }

    .swiper {
        image {
            height: 525rpx;
            width: 100%;

        }
    }

    .swiper {
        height: 525rpx;
    }

    .menuBox {
        image {
            width: 32rpx;
            height: 32rpx;
            margin-left: 8rpx;
        }

        .menu {
            background-size: 100% 100%;
            background-position: center;
            width: 330rpx;
            height: 150rpx;
            font-weight: 500;
            padding-left: 38rpx;
            font-size: 28rpx;
            margin-top: 32rpx;
        }


    }

    .dataitem {
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 48rpx;
        margin-right: 106rpx;

        image {
            width: 70rpx;
            margin-bottom: 20rpx;

        }
    }

    .gridItem {
        position: relative;

        image {
            width: 221rpx;
            height: 140rpx;

        }

        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;

        text {
            position: absolute;
            left: 20rpx;
            top: 20rpx;
            z-index: 9;

        }
    }
</style>
<style scoped lang="scss">
    .title {
        font-weight: bold;
        font-size: 36rpx;
        color: #111111;
    }

    .goodsItem {
        width: 336rpx;
        margin-top: 32rpx;
        background: #FFFFFF;
        border-radius: 15rpx;
        font-weight: 500;
        font-size: 30rpx;
        padding-bottom: 24rpx;

        view {
            margin: 24rpx 24rpx 0 24rpx;
        }

        image {
            width: 336rpx;
            height: 340rpx;
            border-radius: 15rpx 15rpx 0 0;
        }

        .name {

            color: #333333;
        }

        .price {
            color: #FF4345;
        }
    }

    .goods {
        position: relative;
        z-index: 9;
        margin: -80rpx 25rpx 20rpx;

        background: #fff;

        padding: 30rpx 28rpx;
        border-radius: 15rpx;

        .goodsName {
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
        }

        font-size: 22rpx;
        color: #555555;

        .tag {
            min-width: 121rpx;
            text-align: center;
            height: 33rpx;
            background: #FEAB61;
            border-radius: 3rpx;
            display: inline-block;
            font-size: 22rpx;
            line-height: 33rpx;
            font-weight: 400;
            margin-left: 10rpx;
            color: #fff;
            box-sizing: border-box;
        }
    }

    .tagList {
        flex-wrap: wrap;
        margin: 14rpx 0 24rpx 0;

        text {
            margin-top: 10rpx;
            display: block;
            min-width: 118rpx;
            box-sizing: border-box;
            padding: 0 27rpx;
            line-height: 40rpx;
            height: 40rpx;
            background: rgba(0, 197, 132, 0.08);
            border-radius: 3rpx;
            margin-right: 6rpx;
            color: #00C584;
            text-align: center;
            font-size: 22rpx;

        }
    }

    .address {
        image {
            width: 52rpx;
        }
    }
</style>